<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="description" content="The best Lost & Found solution for travelers" />
	<meta name="keywords" content="travel,lost&found,lost,found" />
	<meta name="author" content="Mark Rosenthal" />
	<link rel="stylesheet" type="text/css" href="style/the-grid.css" title="The Grid" media="all" />
	<link type="text/css" href="css/excite-bike/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
    <script src="script/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
    <script src="script/common.js" type="text/javascript"></script>
	<title>Pijunn - I Lost something</title>
</head>

<body>
<div id="width960">

	<div id="header" class="row">
		<div class="col c12">
			<p><a href="index.html"><img src="images/header.jpg" alt="Pijunn v1.0" /></a></p>
			<div id="head-links" class="fright">
				<a href="registration.html">Register</a>
				 or 
				<a href="login.html">Login</a>
			</div>
		</div>
		<span class="feedback followLink" id="usrFeedBk"></span>
		<div id="memberFeedbackPanel" title="Send Feedback" class="hidden">
    		<p class="validateTips">All form fields are required.</p>
 
			<form id="memberFeedbackForm">
				<div class="label">Dear pijunn.com,</div>
				<div id="feedbackTextDiv">
					<textarea tabindex="101" name="feedbackText" id="feedbackText"></textarea>                
				</div>
			
				<div class="row">
					<div class="label formatLH">Your Email Address</div>
					<div id="memberEmailDiv" class="field">
						<input type="text" maxlength="64" tabindex="102" name="feedbackEmail" id="feedbackEmail">
					</div>
				</div>
			</form>
		</div>
	</div>
	
	<div class="row">
		<div class="col c12">
			<h1>Describe what you Lost:</h1>
		</div>
	</div>
		
	<div class="row">
		<div class="col c12">
			<h2 class="question">Is there a Pijunn Tag?</h2>
			<label for="isTag" class="large">Yes</label>
			<input id="isTag" type="radio" name="tagExists" value="true">
			<label for="noTag" class="large">No</label> 
			<input id="noTag" type="radio" name="tagExists" value="false">
		</div>
	</div>

	<div class="row">
		<div class="col c2">&nbsp;</div>
		<div class="col c10">		
			<div id="tag-box" class="formBox hidden">
				<form>
					<label for="textinput">Tag ID:</label>
					<input type="text" hint="Enter the tag from the pijunn label" id="textinput" class="formTextInput"><br/>
					<input type="submit" id="lostWithTag" class="basic-ok-button submitButton" value="Find It"/>
					<input type="submit" class="basic-cancel-button submitButton" value="Cancel"/>
				</form>
			</div>
		</div>
	</div>	

	<div class="row">
		<div class="col c2">&nbsp;</div>
		<div class="col c10">		
			<div id="notag-box" class="formBox hidden">
				<form>
					<label for="description">What is it:</label>
					<textarea id="description" name="description" hint="Description of lost item" class="formTextInput"></textarea><br/>
					<label for="identifiers">Any special identifiers:</label>
					<textarea id="identifiers" name="identifiers" hint="List of identifying features" class="formTextInput"></textarea><br/>
					<label for="venues">Where did you lose it?</label>
					<span id="lostLoc">
						<input type="text" hint="Venues" id="venues" name="venues" class="formTextInput"/><br/>
						<label for="city">&nbsp;</label>
						<input type="text" hint="City" id="city" name="city" class="formTextInput"/><br/>
					</span><br/>
					<div>
						<label>Can't Remember?</label>
						<button id="trackBack" class="basic-ok-button">Track Back</button>
					</div>
					<label for="lostTime">When?</label>
					<input type="text" hint="Time" id="lostTime" name="lostTime" class="formTextInput time"/><br/>
					<label for="reward">Reward Amount?</label>
					<input type="text" hint="$ Amount" id="reward" name="reward" class="formTextInput"/>
					<div id="slider"></div>
					<h3 id="heading-10" class="formHeading"><i>Studies have shown that &nbsp;offering a reward greatly increases the chances of recovering your lost item</i></h3>
					<input type="submit" id="lostWithNoTag" class="basic-ok-button submitButton" value="Find It"/>
					<input type="submit" class="basic-cancel-button submitButton" value="Cancel"/>
				</form>
			</div>
		</div>
	</div>
			

	<div class="row">
		<div class="col c2">&nbsp;</div>
		<div class="col c10">		
			<div id="found-box" class="formBox hidden">
				<form>
					<p>Your <span style="color: purple;">iPad</span> has been reported missing</p><br/>
					<p>Would you like to issue an APB for a nominal extra charge?</p>
					<input type="submit" id="lostWithNoTag" class="basic-ok-button submitButton" value="Issue APB"/>
					<input type="submit" class="basic-cancel-button submitButton" value="Cancel"/>
				</form>
			</div>
		</div>
	</div>	
		
	<div id="footer" class="row">
		<div class="col c12">
			<p>&copy; 2012 Pijunn, LLC<br />
			<a href="index.html">Home</a> | <a href="index.html">About</a> | <a href="merchandise.html">Products &amp; Services</a> | <a href="#">Media</a> | <a href="#">My Account</a> | <a href="#">Contact Us</a>
		</div>
	</div>
	
			
	<div id="dialog-form" title="Add Travel Segment">
		<form>
		<fieldset>
			<span class="validateTips"></span>
			<label for="trackVenue">Venue</label>
			<input type="text" name="trackVenue" id="trackVenue" hint="Ex; Hertz Car Rental, Airport, Taxi" class="wrap-text ui-widget-content ui-corner-all" />
			<label for="trackCity">City</label>
			<input type="text" name="trackCity" id="trackCity" hint="City where Venue is located" class="wrap-text ui-widget-content ui-corner-all" />
		</fieldset>
		</form>
		<button id="addBtn">Add</button>
		<div id="trackSegments" class="imageList"></div>
	</div>
	
</div>
</body>
<script type="text/javascript">
<!--
$(document).ready(function(){
	   $('input[name="tagExists"]').click(function(){
		   $('#tag-box, #notag-box').hide();
		   if ($(this).attr('value') === 'true') {
			   $('#tag-box').show();
		   }
		   else {
			   $('#notag-box').show();
		   }
	   });
	   
       $( "#slider" ).slider({
           value:50,
           min: 25,
           max: 500,
           step: 5,
           slide: function( event, ui ) {
               $( "#reward" ).val( "$" + ui.value );
           }
       });
       $( "#reward" ).val( "$" + $( "#slider" ).slider( "value" ) );
	   
	   $('#lostWithTag').click(function(){
		   if ($('#textinput').val() == '12345') {
			   $('#tag-box').hide();
			   $('#found-box').show();
		   }
		   else {
			   $('#textinput').css('color','red').after('<span class="error">Invalid ID!</span>');
		   }	  
		   
		   return false;
	   });
	   
	   $('#lostWithNoTag').click(function(){
		   $('#notag-box').hide();
		   $('#found-box').show();
	   });
	  
		var venue = $( "#trackVenue" ),
			city = $( "#trackCity" ),
			allFields = $( [] ).add( venue ).add( city ),
			tips = $( ".validateTips" ),
			trackBack = $( "#trackSegments" );
		
		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}
		
		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}
		
		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$('#addBtn').button({
	        icons: {
	            primary: "ui-icon-plus"
	        },
	        text: false
	    })
	    .click(function(){
			var bValid = true;
			allFields.removeClass( "ui-state-error" );

			bValid = bValid && checkLength( venue, "Venue", 3, 16 );
			bValid = bValid && checkLength( city, "city", 3, 80 );

			bValid = bValid && checkRegexp( venue, /^[a-z]([a-z ])+$/i, "Venue may consist of a-z, spaces, begin with a letter." );
			// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
			bValid = bValid && checkRegexp( city, /^([a-zA-Z ])+$/, "City only allow : a-z" );
	    	
			if ( bValid ) {
				$( "#trackSegments" ).append( '<img src="images/blueArrow.jpeg"' +
					'title="' + 
					city.val() + ': ' + venue.val() + 
				'"/>' ); 
				venue.val('');
				
				$( "#trackSegments img" ).tooltip();
			}
	    });
	   
	   $( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 350,
			width: 450,
			modal: true,
			buttons: {
				"Save Segments": function() {
						$('#lostLoc').empty().addClass('imageList').append(trackBack.children());
						$( '#lostLoc img' ).each(function(){
							var content = $(this).attr('title').split(': ');
							$('#lostLoc').append('<input type="hidden" name="venues" value="' +content[1]+ '"/><input type="hidden" name="city" value="'+content[0]+'"/>')
						});
						$( this ).dialog( "close" );
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
	   
	   $( "#trackBack" )
			.click(function(e) {
				$( "#dialog-form" ).dialog( "open" );
				e.preventDefault();
			});
	 });
-->
</script>
</html>
